// gulp定制任务 =>执行任务
const gulp = require('gulp');
const less = require('gulp-less'); //less转css
const cssmin = require('gulp-cssmin');//css压缩
const concat = require('gulp-concat');//js合并
const uglify = require('gulp-uglify');//js压缩
const babel = require('gulp-babel');//es6转es5
const imagemin = require('gulp-imagemin');//图片压缩
const connect = require('gulp-connect');//创建一个node服务


// gulp.task('任务名'.callback);
// 输出html: 执行gulp execHtml
gulp.task('execHtml',() => {
    gulp.src('./src/index.html')
    .pipe(gulp.dest('test'))
    .pipe(gulp.dest('dist'));
});


// 输出css
gulp.task('execCss',() => {
    gulp.src('./src/css/*.css')
    .pipe(gulp.dest('test/css'))
    .pipe(gulp.dest('dist/css'));
});

// 将less输出为css
gulp.task('execLess',() => {
    gulp.src('./src/css/*.less')
    // 输出之前用less()将less文件转css文件
    .pipe(less())
    // 读取和压缩css文件
    .pipe(cssmin())
    .pipe(gulp.dest('test/css'))
    .pipe(gulp.dest('dist/css'))
    .pipe(connect.reload()) //当内容发生改变时，重新加载
});

// 输出js,合并并压缩
gulp.task('execJs',() => {
    gulp.src('./src/js/*.js')
    .pipe(concat('main.js'))//合并
    .pipe(babel({ presets: ['es2015'] }))//转es5
    .pipe(uglify())//压缩
    .pipe(gulp.dest('test/js'))
    .pipe(gulp.dest('dist/js'));
});


// 压缩图片
gulp.task('execImg',() => {
    gulp.src('./src/images/*')
    .pipe(imagemin())
    .pipe(gulp.dest('test/images'))
    .pipe(gulp.dest('dist/images'))
});

gulp.task('execServer',() => {
    //connect.server();
    connect.server({
        root: ['dist'],//服务器管理/运行哪个目录(默认是项目的根目录)
        livereload: true,//是否热更新
        port:3000 //指定web服务的端口号（默认是8080）
    });

   /*  gulp监视文件，并且可以在文件发生改动时做一些事情.
    *  参数一：监视的文件
    *  参数二: 在文件变动后执行的一个task任务
    * */
    gulp.watch('src/css/*.less',['execLess']);
});


// 定制总任务  一次性执行所有任务
//gulp.task('all',['execLess','execCss','execHtml']);


// 默认执行：gulp
gulp.task('default',[
    'execLess',
    'execCss',
    'execJs',
    'execImg',
    'execHtml',
    'execServer'
]);